import DGDialogLayout from "./DGDialogLayout/DGDialogLayout.tsx";
import DGTextView from "./DGTextView.tsx";
import DGDrawerLayout from "./DGDrawerLayout/DGDrawerLayout.tsx";
import {Box} from "@mui/material";
import {FC, useState} from "react";

interface DGOpenLinkProps {
    state: boolean,
    close: () => void,
    name: string,
    link: string
}


const DGOpenLink: FC<DGOpenLinkProps> = ({state, close, name, link}) => {
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 关闭并跳转
    const handleOpenLink = () => {
        // 开始加载
        setLoading(true);
        // 延时操作
        setTimeout(() => {
            // 关闭加载
            setLoading(false);
            // 关闭
            close();
            // 跳转
            setTimeout(() => window.location.href = link, 0);
        }, 1000);
    }

    const ContentView = (<>
        <DGTextView Body Bold>将要前往：【 {name} 】</DGTextView>
        <DGTextView Body Bold>
            我们无法保证访问内容的安全性，如果您需要继续访问，请保护好个人信息！点击确定将会前往。
        </DGTextView>
    </>);
    return (<Box>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            load={loading} title="跳转提示" state={state} close={() => close()}
            submit={{name: "前往", click: () => handleOpenLink()}} PANEL AUTO>
            {ContentView}
        </DGDialogLayout>
        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout
            load={loading} title="跳转提示" state={state} close={() => close()}
            submit={{name: "前往", click: () => handleOpenLink()}} flex="bottom" PANEL AUTO>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}
export default DGOpenLink;